<template>
	<view>
		<view class="appoint-record-box" v-for="(item, index) in appointProductList" :key="item.id">
			<view class="top-title">
				<!-- <text>{{item.appointmentId}}</text> -->
				<text class="left">预约产品</text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">产品名称：</text>
				<text class="right">{{ item.productName }}</text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">价格：</text>
				<text class="right">{{ item.price }}</text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">预约数量：</text>
				<text class="right">{{ item.buycount }}</text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">预约时间：</text>
				<text class="right">{{ item.gmtCreate }}</text>
			</view>
			<view class="appoint-info">
				<text class="left balck-text">状态：</text>
				<!-- 预约产品 0 未开始 1 已完成 2已取消-->
				<text class="right green-text" v-if="item.ok === 0">已预约</text>
					<button class="cancel-button red-text" v-if="item.ok === 0" style="width: 300rpx;" @click="cancelAppoint(item.id)">取消预约</button>
				<view class="right" v-if="item.ok === 1">
					<text class="green-text">已完成</text>
				</view> 
				<view class="right" v-if="item.ok === 2">
					<text class="red-text">已取消</text>
				</view> 
				
				<!-- 当状态为2或者3时证明是失信的 -->
				<text class="right red-text" v-if="item.status === 1 || item.status === 2">
					{{ item.status | statusText }}</text>
			</view>
		</view>
		<view class="loading">{{loadingText}}</view>
	</view>
</template>

<script>
	import {queryAppointProduct} from '@/common/api/product.js'
	import {cancelProduct} from '@/common/api/product.js'
	var _self = 1,timer = null
	export default {
		data() {
			return {
				isRefresh:false,
				appointProductList: [],
				loadingText: '已加载全部',
				page: 1,
				TabCur: 0,
				scrollLeft: 0
			}
		},
		// 到达底部时会自动获取新数据
		onReachBottom: function() {
			this.loadingText = '加载中'
			let _self = this
			if (timer != null) {
				clearTimeout(timer);
			}
			timer = setTimeout(function() {
				if(_self.loadingText!='已加载全部'){
					_self.queryAppointProduct()
					_self.loadingText = '已加载全部'
				}
			}, 1000);
		},
		methods: {
			// 下拉刷新
			onPullDownRefresh() {
				this.loadingText = '加载中'
				let _self = this
				if (timer != null) {
					clearTimeout(timer);
				}
				timer = setTimeout(function() {
					if(_self.loadingText!='已加载全部'){
						_self.isRefresh = true
						_self.queryAppointProduct()
						uni.stopPullDownRefresh();
					} 
				}, 1000);
			},
			// 取消预约产品
			cancelAppoint(item) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '是否取消该次预约',
					success: function(res) {
						if (res.confirm) {
							cancelProduct(item).then(res =>{
								if(res.data.code === 200){
									that.queryAppointProduct()
									uni.showToast({
										title: '取消成功',
										icon: 'success'
									})
								}
							})
						}
					}
				})
			},
			//获取所有预约产品
			queryAppointProduct :function(){
				if(!this.isRefresh){
					uni.showLoading({
						title: '加载中'
					})
				}else{
					uni.showToast({
						title: '刷新成功',
						icon: 'success'
					})
				}
				let that = this
				queryAppointProduct().then(res=>{
					console.log('res',res)
					if(res.data.code === 200){
						that.appointProductList = res.data.data.records
						if(!that.isRefresh){
							uni.hideLoading()
						}
					}
				})
			},
		},
		onLoad(){
			this.queryAppointProduct()
		}
	}
</script>

<style lang="scss">
	@import '@/common/scss/common.scss';

	// 一个个的数据块
	.appoint-record-box {
		@include width-margin(90%, auto);
		border-radius: 6px;
		overflow: hidden;
		background-color: #FFFFFF;
		margin-top: 30rpx;

		.top-title {
			@include width-margin(90%, 80rpx);
			line-height: 80rpx;
			@include row-left-right(50%, 50%);
			@include font-style(16px, 500, $major-color);
			border-bottom: 1px solid $uni-border-color;
		}

		.appoint-info {
			@include width-margin(90%, 70rpx);
			line-height: 70rpx;
			@include row-left-right(30%, 80%);
			@include font-style(16px, 500, $gray-color);
			align-items: center;

			// 当用户还没到就就诊的时间看到的
			.green-text {
				@include font-style(16px, 500, #6EC823);
			}

			// 有失信时的状态颜色
			.red-text {
				@include font-style(16px, 500, #CE1229);
			}

			// 排队号的颜色
			.balck-text {
				@include font-style(16px, 500, #000000);
			}

			// /取消预约按钮
			.cancel-button {
				width: 190rpx;
				height: 60rpx;
				line-height: 60rpx;
				margin-left: 20rpx;
				margin-right: 0;
			}
		}
	}

	.appoint-record-box:last-child {
		margin-bottom: 30rpx;
	}
	.loading {
		text-align: center;
		line-height: 80px;
	}
</style>

